var barwidth = $('.bar')[0].offsetWidth;
var boxwidth = $('.box')[0].offsetWidth;
// var cha = barwidth - boxwidth;
var current_vol = Math.round(127 * 0.5);
//拖动音量
$('.box').mousedown(function (ev) {
    var boxL = $('.box')[0].offsetLeft + boxwidth/2;
    var e = ev || window.event;  //兼容性
    var mouseX = e.clientX;

    window.onmousemove = function (ev) {
        var e = ev || window.event;
        var moveL = e.clientX - mouseX; //鼠标移动的距离
        var newL = boxL + moveL;
        if (newL < 0) {
            newL = 0;
        }
        if (newL >= barwidth) {
            newL = barwidth;
        }
        $('.box').css('left', newL - boxwidth/2 + 'px');
        current_vol = Math.round(newL / barwidth * 127);
        $('.bar1').css('width', newL + 'px');
        SetVolume(current_vol);
        return false;
    }
    window.onmouseup = function () {
        window.onmousemove = false;
        return false;
    }
    return false;
});
//点击音量条
$('.bar').click(function (ev) {
    var left = ev.clientX - $('#Labels')[0].offsetLeft - $('.volume')[0].offsetLeft - $('.bar')[0].offsetLeft;
    console.log(ev.clientX, $('.volume')[0].offsetLeft, $('.bar')[0].offsetLeft, boxwidth);
    if (left < 0) {
        left = 0;
    }
    if (left >= barwidth) {
        left = barwidth;
    }
    $('.box').css('left', left - boxwidth/2 + 'px');
    current_vol = parseInt(left / barwidth * 127);
    $('.bar1').css('width', left + 'px');
    SetVolume(current_vol);
    return false
});
MIDI.loadPlugin({
    soundfontUrl: "./soundfont/",
    instrument: 'acoustic_grand_piano', // or 1 (default)
    // instrument: 'Bright Acoustic Piano',
    onsuccess: function () {
        /// this sets up the MIDI.Player and gets things going...
        player = MIDI.Player;
        player.timeWarp = 1; // speed the song is played back
        // player.BPM = 180;
        SetVolume(current_vol);
        player.loadFile(music[0], player.pause);
        console.log("loadFile finish...");
        console.log(player.playing);
        player.addListener(function (data) {
            var pianoKey = data.note - 21;
            var ctime = MIDI.Player.currentTicks / MIDI.Player.ticksPerBeat / MIDI.Player.BPM * 60;
            $('#TIME').html(getFormatTime(ctime).toString());
            console.log(data.event);
            if (data.now == data.end) {
                $('.buttonstop').css('background-image', 'url(../static/img/stop.svg)');
            }
        });
    }
});
var PlaySingleClik = function(noteNumber){
    MIDI.noteOn(0, noteNumber, MIDI.Player.constVelocity, 0);
}
var Interval;
//暂停、播放和重新开始
var pausePlayStop = function (restart) {
    if (restart)//重新开始
    {
        var playmode = MIDI.Player.playing;
        MIDI.Player.stop();
        if (playmode) {
            MIDI.Player.start();
            $('.buttonstop').css('background-image', 'url(../static/img/start.svg)');
        } else {
            $('.buttonstop').css('background-image', 'url(../static/img/stop.svg)');
        }
        $('#TIME').html(getFormatTime(0).toString());
    } else {//暂停和播放
        if (MIDI.Player.playing) {
            MIDI.Player.pause();
            clearInterval(Interval);
            $('.buttonstop').css('background-image', 'url(../static/img/stop.svg)');
        } else {
            MIDI.Player.start();
            Interval = setInterval(function(){mvCursor();} , 10);
            $('.buttonstop').css('background-image', 'url(../static/img/start.svg)');
        }
    }
}

var music = ['https://www.midijs.net/midi/alan_jackson_dont_rock_the_jukebox.mid', 'https://www.midijs.net/midi/hinematov.mid'];
// 设置音量
function SetVolume(vol) {
    MIDI.setVolume(0, vol);
}
//格式化时间
function getFormatTime(time) {
    var h = Math.floor(time / 3600);
    var m = Math.floor((time % 3600) / 60);
    var s = Math.floor(time - h * 3600 - m * 60);
    h = h > 9 ? h : "0" + h;
    m = m > 9 ? m : "0" + m;
    s = s > 9 ? s : "0" + s;
    return h + ":" + m + ":" + s;
}
//设置播放BPM
function SetRate(value) {
    MIDI.Player.BPM = value;
}

//BPM超出范围弹窗
$('#poptransparent').css('display', 'none');
function popnote() {
    $('#poptransparent').css('display', '');
}
function hidderpop() {
    $('#poptransparent').css('display', 'none');
}
//midi文件导入
$("#import").click(function () {
    $("#files").click();
});
function importMidi() {
    var seletedFile = $('#files')[0].files[0];
    var reader = new FileReader();
    reader.readAsDataURL(seletedFile);
    reader.onload = function () {
        MIDI.Player.loadFile(this.result, MIDI.Player.pause);
    }
};
var pointOffSet = 100; //px
//滑动进度线条
$('.point').mousedown(function(ev){
    var pLinePosition = $('.point')[0].offsetLeft;
    var e = ev || window.event;
    var mouseX = e.clientX;
    //console.log('Enter click .point');
    window.onmousemove = function(ev){
        //console.log('Enter move .point');
        var e = ev || window.event;
        var moveL = e.clientX - mouseX;
        var newpLinePosition = pLinePosition + moveL;
        if(newpLinePosition<146)
            newpLinePosition = 146;
        if(newpLinePosition > 1426)
            newpLinePosition = 1426;
        $('.point').css('left', newpLinePosition+'px');
        // console.log('left', newpLinePosition, $('.point').css('left'))
        return false;
    }
    window.onmouseup = function(){
        window.onmousemove = false;
        return false;
    }
});
//move point cursor
var mvCursor = function(){
    var offLeft = $('.point')[0].offsetLeft%1400;
    $('.point').css('left', offLeft+1+'px');
}
// 点击下载按钮
$('.BtnDownload').click(function(){
    //other actions
    $('.BtnDownload').css('background-color', '#589BFF');
});
window.onresize = function()
{
    //隐藏画笔
    if($('.BtnPencil')[0].offsetLeft <= $('.bar')[0].offsetLeft+$('.bar')[0].offsetWidth + $('.volume')[0].offsetLeft)
    {
        $('.BtnPencil').css('visibility','hidden');

    }else $('.BtnPencil').css('visibility','visible');
    //隐藏四个箭头
    if($('.BtnFourArrow')[0].offsetLeft <= $('.bar')[0].offsetLeft+$('.bar')[0].offsetWidth + $('.volume')[0].offsetLeft)
    {
        $('.BtnFourArrow').css('visibility','hidden');

    }else $('.BtnFourArrow').css('visibility','visible');
    //隐藏音符大小
    if($('.NoteX')[0].offsetLeft <= $('.bar')[0].offsetLeft+$('.bar')[0].offsetWidth + $('.volume')[0].offsetLeft)
    {
        $('.NoteX').css('visibility','hidden');
        // $('.volume').css('visibility','hidden');

    }else{
        $('.NoteX').css('visibility','visible');
        // $('.volume').css('visibility','visible');
    } 
    //隐藏音量条
    if($('.BtnLock')[0].offsetLeft <= $('.bar')[0].offsetLeft+$('.bar')[0].offsetWidth + $('.volume')[0].offsetLeft)
    {
        $('.volume').css('visibility','hidden');
    }else $('.volume').css('visibility','visible');
    //隐藏锁
    if($('.BtnLock')[0].offsetLeft <= $('#OriginTune')[0].offsetLeft + $('#OriginTune')[0].offsetWidth)
    {
        $('.BtnLock').css('visibility','hidden');
    }else $('.BtnLock').css('visibility','visible');
    //隐藏AI续写
    if($('.BtnContinous')[0].offsetLeft <= $('#OriginTune')[0].offsetLeft + $('#OriginTune')[0].offsetWidth)
    {
        $('.BtnContinous').css('visibility','hidden');
    }else $('.BtnContinous').css('visibility','visible');
    //隐藏乐理润色
    if($('.BtnPolish')[0].offsetLeft <= $('#OriginTune')[0].offsetLeft + $('#OriginTune')[0].offsetWidth)
    {
        $('.BtnPolish').css('visibility','hidden');
    }else $('.BtnPolish').css('visibility','visible');
    //隐藏AI修改
    if($('.BtnModify')[0].offsetLeft <= $('#OriginTune')[0].offsetLeft + $('#OriginTune')[0].offsetWidth)
    {
        $('.BtnModify').css('visibility','hidden');
        // $('#OriginTune').css('visibility','hidden');
    }else{
        $('.BtnModify').css('visibility','visible');
        // $('#OriginTune').css('visibility','visible');
    }
    //隐藏原声钢琴
    if($('.BtnDownload')[0].offsetLeft <= $('#OriginTune')[0].offsetLeft + $('#OriginTune')[0].offsetWidth)
    {
        // $('.BtnModify').css('visibility','hidden');
        $('#OriginTune').css('visibility','hidden');
    }else{
        // $('.BtnModify').css('visibility','visible');
        $('#OriginTune').css('visibility','visible');
    }
}

